<template>
  <div class="InformationMaintenance">
    <div class="PageContent">
      <el-row>
        <el-col :span="4" class="left-tree">
          <el-tree :data="TreeData" ref="cartree"
                   :props="defaultProps"
                   node-key="id"
                   show-checkbox
                   default-expand-all
                   accordion
                   check-strictly
                   @check-change="handleClick"
          ></el-tree>
        </el-col>
        <el-col :span="20"  class="right-tree">
          <div v-if="selectType == 'car'">
            <el-row style="text-align: left;line-height: 5em;">
              <el-button type="primary"  v-if="btnRight.btnInfMainAdd" @click="addCar()">添加</el-button>
              <el-button type="primary"  v-if="btnRight.btnInfMainEdit" @click="modifyCar()">修改</el-button>
              <el-button type="danger"   v-if="btnRight.btnInfMainDelete" @click="removeCar()">删除</el-button>
            </el-row>
            <el-table
              ref="singleTable"
              :data="tableCarData" :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
              border
              stripe
              @select="select" @select-all="selectAll"
              style="width: 100%;calc(100vh - 70px);overflow-y: scroll">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                property="carCode"
                label="车辆编号"
                align = 'center'
                width="120">
              </el-table-column>
              <el-table-column
                property="carNo"
                label="车牌号"
                align = 'center'
                width="120">
              </el-table-column>
              <el-table-column
                property="carType"
                label="车辆类别"
                align = 'center'
                width="120">
              </el-table-column>
              <el-table-column
                property="driverUser"
                align = 'center'
                label="默认司机"
                width="120">
              </el-table-column>
              <el-table-column
                property="carBelong"
                align = 'center'
                label="车辆归属"
                width="120">
              </el-table-column>
              <el-table-column
                property="disableState"
                align = 'center'
                label="状态"
                width="120">
                <template slot-scope="{row,$index}">
                  <p v-if="row.disableState">
                    <span v-if="row.disableState==0">有效可用</span>
                    <span v-else-if="row.disableState==1">无效禁用</span>
                  </p>
                </template>
              </el-table-column>
              <el-table-column
                property="itemUnit"
                align = 'center'
                label="规则说明">
                <template slot-scope="scope" >
                  <div v-if="scope.row.rule" v-for="(item, index) in scope.row.rule" :key="index">
                    <p style="width: 100%;white-space: pre-wrap;">
                      <span>用途:【{{ item.purpose }}】</span>，
                      <span>单价:【{{ item.itemPrice }}】</span>，
                      <span>{{ item.ruleType }}</span>，
                      <span>{{ item.ruleDescribe }}</span>
                    </p>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="selectType == 'hall'">
            <el-row style="text-align: left;line-height: 5em;">
              <el-button type="primary" v-if="btnRight.btnInfMainAddHall" @click="addHall()">添加</el-button>
              <el-button type="primary" v-if="btnRight.btnInfMainEditHall" @click="modifyHall()">修改</el-button>
              <el-button type="danger"  v-if="btnRight.btnInfMainDeleteHall" @click="removeHall()">删除</el-button>
            </el-row>
            <el-table
              ref="singleTable"
              :data="tableHallData" :header-cell-style="{background:'rgb(222,225,230)',color:'#606266'}"
              border
              @select="select" @select-all="selectAll"
              style="width: 100%;calc(100vh - 70px);overflow-y: scroll">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                property="hallCode"
                label="礼厅编号"
                align = 'center'
                width="120">
              </el-table-column>
              <el-table-column
                property="hallName"
                label="礼厅名称"
                align = 'center'
                width="120">
              </el-table-column>
              <el-table-column
                property="hallType"
                label="礼厅类型"
                align = 'center'
                width="120">
              </el-table-column>
              <el-table-column
                property="driverUser"
                align = 'center'
                label="允许用途"
                width="120">
                <template slot-scope="{row,$index}">
                  <p v-if="row.disableState">
                    <span v-if="row.disableState==0">有效可用</span>
                    <span v-else-if="row.disableState==1">无效禁用</span>
                  </p>
                </template>
              </el-table-column>
              <el-table-column
                property="carBelong"
                align = 'center'
                label="守灵厅收费规则"
                width="200">
                <template slot-scope="scope" >
                  <div v-if="scope.row.rule" v-for="(item, index) in scope.row.rule" :key="index">
                    <p style="width: 100%;white-space: pre-wrap;">
                      <span>用途:【{{ item.purpose }}】</span>，
                      <span>单价:【{{ item.itemPrice }}】</span>，
                      <span>{{ item.ruleType }}</span>，
                      <span>{{ item.ruleDescribe }}</span>
                    </p>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                property="carBelong"
                align = 'center'
                label="告别厅收费规则"
                width="200">
                <template slot-scope="scope" >
                  <div v-if="scope.row.rule" v-for="(item, index) in scope.row.rule" :key="index">
                    <p style="width: 100%;white-space: pre-wrap;">
                      <span>用途:【{{ item.purpose }}】</span>，
                      <span>单价:【{{ item.itemPrice }}】</span>，
                      <span>{{ item.ruleType }}</span>，
                      <span>{{ item.ruleDescribe }}</span>
                    </p>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                property="disableState"
                align = 'center'
                label="状态"
                width="120">
                <template slot-scope="{row,$index}">
                  <p v-if="row.disableState">
                    <span v-if="row.disableState==0">有效可用</span>
                    <span v-else-if="row.disableState==1">无效禁用</span>
                  </p>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="margin-top: 20px">
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="车辆信息维护" :visible.sync="dialogVisibleCar" width="700px" v-dialogDrag   border >
      <el-form :model="saveCarData" class="saveform" :rules="rules" ref="cardialog" :inline="true" label-width="120px" :disabled="saveFlagCar">
        <el-row :gutter="5">
          <el-form-item label="车辆编号:" prop="carCode">
            <el-input v-model="saveCarData.car.carCode" ></el-input>
          </el-form-item>
          <el-form-item label="车牌号:" prop="carNo">
            <el-input v-model="saveCarData.car.carNo"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="车辆类别:" prop="carTypeCode">
            <el-select v-model="saveCarData.car.carTypeCode" @change="carTypeChange(saveCarData.car.carTypeCode)"  placeholder="请选择" >
              <el-option
                v-for="item in saveCarData.dicts.transport_car_type	"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"
                :disabled="item.disableState?true:false"/>
            </el-select>
          </el-form-item>
          <el-form-item label="默认司机:" >
            <el-select v-model="saveCarData.car.driverUserId" onkeydown="return (event.keyCode!=8)" placeholder="请选择" >
              <el-option
                v-for="item in saveCarData.users.transport_task_driver_user"
                :key="item.id"
                :label="item.fullName"
                :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5" class="saveform" >
          <el-form-item label="收费规则:" >
            <div v-if="saveCarData.ruleItems"  class="ruleItem">
              <p class="content" v-for="(item, index) in showRule" :key="index">
                <span>用途:【{{ item.purpose }}】</span>，
                <span>单价:【{{ item.itemPrice }}】</span>，
                <span>{{ item.ruleType }}</span>，
                <span>{{ item.ruleDescribe }}</span>
              </p>
            </div>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="车辆归属:" prop="carBelongCode">
            <el-select v-model="saveCarData.car.carBelongCode" placeholder="请选择" >
              <el-option
                v-for="item in saveCarData.dicts.car_belong	"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"
                :disabled="item.disableState?true:false"/>
            </el-select>
          </el-form-item>
          <el-form-item label="状态:" prop="disableState">
            <el-select v-model="saveCarData.car.disableState" onkeydown="return (event.keyCode!=8)" placeholder="请选择" >
              <el-option
                v-for="item in disableState"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="显示顺序:" >
            <el-input v-model="saveCarData.car.sort" onkeyup="value= (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" v-if="btnRight.btnInfMainSave" @click="saveCar()" :disabled="saveFlagCar">保存</el-button>
        <el-button v-if="btnRight.btnInfMainCancel" @click="dialogVisibleCar = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as API from '@/api/systemApplication'
  export default {
    name: "InformationMaintenance",
    data() {
      return {
        rules: {
          carCode: [
            {required: true, message: '请输入', trigger: 'blur'},
          ],
          carNo: [
            {required: true, message: '请输入', trigger: 'blur'},
          ],
          carTypeCode: [
            {required: true, message: '请选择', trigger: 'blur'},
          ],
          carBelongCode: [
            {required: true, message: '请选择', trigger: 'blur'},
          ],
          disableState: [
            {required: true, message: '请选择', trigger: 'blur'},
          ],
        },
        selectType:"",//选中类型 车辆car，冷藏cold，礼厅hall，火化炉fire
        TreeData: [{
          id: 1,
          label: '设备信息维护',
          children: [
            {
              id: 2,
              label: '车辆管理'
            },
            {
              id: 3,
              label: '冷藏柜管理'
            },
            {
              id: 4,
              label: '礼厅管理'
            },
            {
              id: 5,
              label: '火化炉管理'
            }
          ]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        //**车辆管理数据开始**//
        tableCarData: [],
        tableSelection:[],
        dialogVisibleCar:false,    //车辆对话框
        saveFlagCar:false,         //车辆保存标志
        onpresscTime:0,  //  阻止短时间内连续点击
        disableState:[
          {label:"有效可用",value:0},{label:"无效禁用",value:1},
        ],
        showRule:[], //根据车辆类型选择显示相应规则
        //车辆对话框需要数据
        saveCarData:{
          "car": {
            "id": 0,
            "carCode": "",
            "carNo": "",
            "carTypeCode": 0,
            "driverUserId": 0,
            "carBelongCode": 0,
            "disableState": 0,
            "sort": 0,
            "remark": "",
            "version": 0
          },
          "dicts": {
            "transport_car_type": [

            ],
            "car_belong": [

            ]
          },
          "users": {
            "transport_task_driver_user": []
          },
          "ruleItems": [{
            "dataCode": 2,
            "purpose": "string",
            "itemPrice": "string",
            "ruleType": "按里程收费",
            "ruleDescribe": "10公里以内120元，超出10公里，每公里加收3.5元。"
          },{
            "dataCode": 2,
            "purpose": "string",
            "itemPrice": "string",
            "ruleType": "按里程收费",
            "ruleDescribe": "10公里以内120元，超出10公里，每公里加收3.5元。"
          },{
            "dataCode": 2,
            "purpose": "string",
            "itemPrice": "string",
            "ruleType": "按里程收费",
            "ruleDescribe": "10公里以内120元，超出10公里，每公里加收3.5元。"
          }]
        },               //车辆
        //**车辆管理数据结束**//

        //**礼厅数据**//
        tableHallData:[],
        saveHallData:{
          "hall": {
            "id": 0,
            "hallCode": "string",
            "hallName": "string",
            "hallTypeCode": 0,
            "disableState": 0,
            "asWake": 0,
            "asFarewell": 0,
            "hallDescribe": "string",
            "remark": "string",
            "sort": 0,
            "version": 0
          },
          "dicts": {
            "mourn_ceremony_hall": [
              {
                "dataCode": 0,
                "dataText": "string",
                "dataTextAbbr": "string",
                "disableState": 0,
                "asDefault": 0
              }
            ]
          },
          "ruleItems": [
            {
              "dataCode": 0,
              "purpose": "string",
              "itemPrice": "string",
              "ruleType": "string",
              "ruleDescribe": "string"
            }
          ]
        },
        dialogVisibleHall:false,    //礼厅对话框
        saveFlagHall:false,         //礼厅保存标志
        btnRight: {
          btnInfMainAdd:true,//新增
          btnInfMainEdit:true,//修改
          btnInfMainDelete:true,//删除
          btnInfMainSave:true,//保存
          btnInfMainCancel:true,//取消
          btnInfMainAddHall:true,//新增礼厅
          btnInfMainEditHall:true,//修改礼厅
          btnInfMainDeleteHall:true,//删除礼厅
        }
        //**礼厅数据结束**//
      }
    },
    methods:{
      //tree单选
      handleClick(data,checked, node){
        if(checked && data.label!="设备信息维护"){
          this.$refs.cartree.setCheckedNodes([data]);
          console.log(this.$refs.cartree.getCheckedNodes())
          switch (data.id) {
            case 2:
              this.selectType = "car";
              this.loadCarListData();
              break;
            case 3:
              this.selectType = "cold";
              // this.loadCarListData();
              break;
            case 4:
              this.selectType = "hall";
              // this.loadCarListData();
              break;
            case 5:
              this.selectType = "fire";
              // this.loadCarListData();
              break;
          }
        }
      },
      select(selection, row) {
        // 选择项大于1时
        if (selection.length > 1) {
          let del_row = selection.shift();
          // console.log('把数组的第一个元素从其中删除后', selection);
          this.$refs.singleTable.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        }
        this.tableSelection = selection
      },

      selectAll(selection) {
        if (selection.length >1) {
          selection.length = 1;
        }
        this.tableSelection = selection
      },
      /**********************车辆方法**********************/
      //table中类型添加
      addCar(){
        let data = this.$refs.cartree.getCheckedNodes()
        //车辆类型为2
        if (data.id==2) {
          this.saveCarData.car = {
            "id": 0,
            "carCode": "",
            "carNo": "",
            "carTypeCode": "",
            "driverUserId": "",
            "carBelongCode": "",
            "disableState": "",
            "sort": "",
            "remark": "",
            "version": 0
          }
        }
        let postData={
          "id": null,
          "dictTypeCodes": [
            "transport_car_type","car_belong"
          ],
          "userRoleCodes": [
            "transport_task_driver_user"
          ]
        }
        API['loadCarWithId'](postData).then(response=>{
          const { data }=response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          if (data.dicts){
            this.saveCarData.dicts = data.dicts;
          }
          if (data.ruleItems){
            this.saveCarData.ruleItems = data.ruleItems;
          }
          if (data.users){
            this.saveCarData.users = data.users;
          }
          this.showRule = []
          if (this.saveCarData.car.carTypeCode) {
            this.saveCarData.ruleItems.forEach(item=>{
              if (item.dataCode == this.saveCarData.car.carTypeCode) {
                this.showRule.push(item)
              }
            })
          }
          this.dialogVisibleCar=true
        }).catch(error => {
          this.$message(error)
        })
        this.dialogVisibleCar = true
      },
      //table中类型修改
      modifyCar(){
        let data = this.tableSelection
        if (data.length==0) {
          this.$message("未选中车辆")
          return
        }
        let postData={
          "id": data[0].id,
          "dictTypeCodes": [
            "transport_car_type","car_belong"
          ],
          "userRoleCodes": [
            "transport_task_driver_user"
          ]
        }
        API['loadCarWithId'](postData).then(response=>{
          const { data }=response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          if (data.car){
            this.saveCarData.car = data.car;
          }
          if (data.dicts){
            this.saveCarData.dicts = data.dicts;
          }
          if (data.ruleItems){
            this.saveCarData.ruleItems = data.ruleItems;
          }
          if (data.users){
            this.saveCarData.users = data.users;
          }
          this.showRule = []
          if (this.saveCarData.car.carTypeCode) {
            this.saveCarData.ruleItems.forEach(item=>{
              if (item.dataCode == this.saveCarData.car.carTypeCode) {
                this.showRule.push(item)
              }
            })
          }
          this.dialogVisibleCar=true
        }).catch(error => {
          this.$message(error)
        })
      },
      //table中服务物品类型删除
      removeCar(){
        let data = this.tableSelection
        if (data.length==0) {
          this.$message("未选中车辆")
          return
        }
        this.$confirm('删除信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          let postData=[
          {
            "id": data[0].id,
            "version": data[0].version
          }
          ]
          API['deleteCarWithId'](postData).then(response=>{
            const { message }=response;
            this.$message(message)
            this.loadCarListData();
          }).catch(error => {
            this.$message(error)
          })
        }).catch(() => {
          //几点取消的提示
        });
      },

      //加载车辆列表
      loadCarListData(){
        let postData={
        }
        API['loadCarList'](postData).then(response=>{
          const { data }=response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          this.tableCarData = data

        }).catch(error => {
          this.$message(error)
        })
      },
      //车辆类型改变后加载规则
      carTypeChange(id){
        this.showRule = []
        if (id) {
          this.saveCarData.ruleItems.forEach(item=>{
            if (item.dataCode == id) {
              this.showRule.push(item)
            }
          })
        }
      },
      //保存车辆信息
      saveCar(){
        if ((Date.now() - this.onpresscTime) > 2000) {
          this.onpresscTime = Date.now()
          console.log(Date.now())
        }else{
          return
        }
        if (this.saveCarData.car.carTypeCode || this.saveCarData.car.carCode || this.saveCarData.car.carNo || this.saveCarData.car.carBelongCode ||this.saveCarData.car.disableState){
          this.$message("信息未填写完整")
        }
        this.saveFlagCar = true
        let postData=this.saveCarData.car
        API['saveCar'](postData).then(response=>{
          const { message }=response;
          this.$message(message)
          this.loadCarListData()
          this.dialogVisibleCar=false
          this.saveFlagCar = false
        }).catch(error => {
          this.$message(error)
          this.saveFlagCar = false
        })
      },
      /**********************车辆方法**************************/

      /**********************礼厅方法**********************/
      //table中类型添加
      addHall(){
        let data = this.$refs.cartree.getCheckedNodes()
        //车辆类型为2
        if (data.id==2) {
          this.saveHallData.hall = {
            "id": 0,
            "carCode": "",
            "carNo": "",
            "carTypeCode": "",
            "driverUserId": "",
            "carBelongCode": "",
            "disableState": "",
            "sort": "",
            "remark": "",
            "version": 0
          }
        }
        let postData={
          "id": null,
          "dictTypeCodes": [
            "transport_car_type","car_belong"
          ],
          "userRoleCodes": [
            "transport_task_driver_user"
          ]
        }
        API['loadHallWithId'](postData).then(response=>{
          const { data }=response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          if (data.dicts){
            this.saveHallData.dicts = data.dicts;
          }
          if (data.ruleItems){
            this.saveHallData.ruleItems = data.ruleItems;
          }
          if (data.users){
            this.saveHallData.users = data.users;
          }
          this.showRule = []
          if (this.saveHallData.hall.hallTypeCode) {
            this.saveHallData.ruleItems.forEach(item=>{
              if (item.dataCode == this.saveHallData.hall.hallTypeCode) {
                this.showRule.push(item)
              }
            })
          }
          this.dialogVisibleHall=true
        }).catch(error => {
          this.$message(error)
        })
        this.dialogVisibleHall = true
      },
      //table中类型修改
      modifyHall(){
        let data = this.tableSelection
        if (data.length==0) {
          this.$message("未选中礼厅")
          return
        }
        let postData={
          "id": data[0].id,
          "dictTypeCodes": [
            "transport_car_type","car_belong"
          ],
          "userRoleCodes": [
            "transport_task_driver_user"
          ]
        }
        API['loadCarWithId'](postData).then(response=>{
          const { data }=response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          if (data.hall){
            this.saveHallData.hall = data.hall;
          }
          if (data.dicts){
            this.saveHallData.dicts = data.dicts;
          }
          if (data.ruleItems){
            this.saveHallData.ruleItems = data.ruleItems;
          }
          if (data.users){
            this.saveHallData.users = data.users;
          }
          this.showRule = []
          if (this.saveHallData.hall.hallTypeCode) {
            this.saveHallData.ruleItems.forEach(item=>{
              if (item.dataCode == this.saveHallData.hall.hallTypeCode) {
                this.showRule.push(item)
              }
            })
          }
          this.dialogVisibleHall=true
        }).catch(error => {
          this.$message(error)
        })
      },
      //table中服务物品类型删除
      removeHall(){
        let data = this.tableSelection
        if (data.length==0) {
          this.$message("未选中礼厅")
          return
        }
        let postData=[
          {
            "id": data[0].id,
            "version": data[0].version
          }
        ]
        API['deleteHallWithId'](postData).then(response=>{
          const { message }=response;
          this.$message(message)
          this.loadHallListData();
        }).catch(error => {
          this.$message(error)
        })
      },

      //加载列表
      loadHallListData(){
        let postData={
        }
        API['loadHallList'](postData).then(response=>{
          const { data }=response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          this.tableHallData = data

        }).catch(error => {
          this.$message(error)
        })
      },
      //类型改变后加载规则
      hallTypeChange(id){
        this.showRule = []
        if (id) {
          this.saveHallData.ruleItems.forEach(item=>{
            if (item.dataCode == id) {
              this.showRule.push(item)
            }
          })
        }
      },
      //保存信息
      saveHall(){
        if (this.saveHallData.hall.hallTypeCode || this.saveHallData.hall.hallCode){
          this.$message("信息未填写完整")
        }
        this.saveFlagHall = true
        let postData=this.saveHallData.car
        API['saveCar'](postData).then(response=>{
          const { message }=response;
          this.$message(message)
          this.loadHallListData()
          this.dialogVisibleHall=false
        }).catch(error => {
          this.$message(error)
        })
        this.saveFlagHall = false
      },
      /**********************礼厅方法**********************/

    },
    //载入方法
    mounted(){
      //载入按钮
      this.btnRight = this.$route.meta.buttons;//mounted(){}
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (let key of Object.keys(this.btnRight)) {
        this.btnRight[key]=(this.btnRight[key]|| this.btnRight[key]=="true")?true:false;
      }
    },

    watch:{
      "dialogVisibleCar"(){
        if (this.dialogVisibleCar == false) {
          this.$nextTick(()=>{
            this.$refs.cardialog.resetFields();
          })
        }
      }
    }

  }
</script>

<style scoped>
  .content{
    width: 500px;
    display: inline-block;
  }
  .ruleItem{
    width: 532px;
    max-height: 6em;
    overflow-y: auto;
    line-height: 1.5em;
  }
  .ruleItem .content{
    width: 100%;
    padding-top:10px;
  }
</style>
